import React, { FC } from "react";
import classNames from "classnames";
import { StepProps, Step } from "./step";

const classPrefix = `bbt-steps`;
const stepClassPrefix = `bbt-step`;

const defaultIcon = <span className={`${stepClassPrefix}-icon-dot`} />;

type Direction = "horizontal" | "vertical";

export type StepsProps = {
  current?: number;
  direction?: Direction;
  children?: React.ReactNode;
  style?: React.CSSProperties & Partial<Record<string | never, string>>;
};

const defaultProps = {
  current: 0,
  direction: "horizontal",
};

const Steps: FC<StepsProps> & { Step: FC<StepProps> } = (p: StepsProps) => {
  const props = { ...defaultProps, ...p };
  const { direction, current } = props;
  const classString = classNames(classPrefix, `${classPrefix}-${direction}`);

  return (
    <div className={classString}>
      {React.Children.map(props.children, (child, index) => {
        if (!React.isValidElement(child)) {
          return child;
        }
        const props = child.props as StepProps;
        let status = props.status || "wait";

        if (index < current) {
          status = props.status || "finish";
        } else if (index === current) {
          status = props.status || "process";
        }

        const icon = props.icon ?? defaultIcon;

        const props_ = { status, icon };

        return React.cloneElement(child, props_);
      })}
    </div>
  );
};

Steps.Step = Step;

export { Steps };
